import React from 'react';
import { Typography, Tooltip, Popover } from 'antd';
import { TypographyProps } from 'antd/lib/typography/Typography';
import { TooltipProps } from 'antd/lib/tooltip';
import styles from './index.less';

export interface EllipsisTooltipProps extends TypographyProps {
    rows?: number;
    white?: boolean;
    tooltipProps?: TooltipProps;
}

const EllipsisTooltip = ({ rows = 2, white = true, tooltipProps, children, ...rest }: EllipsisTooltipProps) => {
    const content = (
        <div className={styles.content} onClick={e => e.stopPropagation()}>
            <div>{children}</div>
        </div>
    );
    const fakeRef = React.useRef(null);
    const elemRef = React.useRef(null);
    const [isEllipsis, setIsEllipsis] = React.useState(false);

    const checkIsEllipsis = () => {
        const fakeHeight = fakeRef?.current?.clientHeight;
        const elemHeight = elemRef?.current?.clientHeight;
        if (elemHeight > fakeHeight) {
            setIsEllipsis(true);
        } else {
            setIsEllipsis(false);
        }
    };

    React.useEffect(() => {
        setTimeout(() => {
            checkIsEllipsis();
        }, 0);
        window.addEventListener('resize', checkIsEllipsis);
        return () => {
            window.removeEventListener('resize', checkIsEllipsis);
        };
    }, []);

    const fakeElem = (
        <div style={{ opacity: 0, position: 'absolute', left: 9999, top: 0, width: '100%', whiteSpace: 'normal' }}>
            <div ref={fakeRef}>
                {[...Array(rows).keys()].map((item, index) => (
                    <span key={item}>我{index < rows - 1 && <br />}</span>
                ))}
            </div>
            <div ref={elemRef} style={{ whiteSpace: 'pre-wrap' }}>
                {children}
            </div>
        </div>
    );

    const renderEllipsis = (ct: any) =>
        white ? (
            <Popover content={content} {...tooltipProps} overlayClassName={styles.ellipsisTooltip}>
                {ct}
            </Popover>
        ) : (
            <Tooltip title={content} {...tooltipProps} overlayClassName={styles.ellipsisTooltip}>
                {ct}
            </Tooltip>
        );

    return (
        <div style={{ position: 'relative', overflow: 'hidden', whiteSpace: 'pre-wrap' }}>
            {rows === 1 && isEllipsis ? (
                renderEllipsis(
                    <Typography.Paragraph
                        {...rest}
                        ellipsis={{
                            rows
                        }}
                    >
                        {children}
                    </Typography.Paragraph>
                )
            ) : (
                <Typography.Paragraph
                    {...rest}
                    ellipsis={{
                        rows
                    }}
                >
                    {isEllipsis ? renderEllipsis(children) : children}
                    {fakeElem}
                </Typography.Paragraph>
            )}
        </div>
    );
};

export default EllipsisTooltip;
